﻿<%@ Page Title="" Language="C#" MasterPageFile="~/PIMMobile.master" AutoEventWireup="true" CodeFile="AllMealPlan.aspx.cs" Inherits="AllMealPlan" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.theme.css" />
    <link rel="stylesheet" type="text/css" href="ThemeRollers/development-bundle/themes/sunny/jquery.ui.all.css" />
    <script src="Scripts/jquery.min.js" type="text/javascript" > </script>
    <script src="Scripts/jquery.slimscroll.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#primary-main').slimscroll({
                size: '15px'
            });
            loadMealPlan();

            //BindSuggestion();
            //SearchMealPlan();
            //ClosePage();
        });

        function loadMealPlan() {
            //            alert('Call LoadRecipes');
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetMealPlan",
                data: "{'MealPlanId':'0','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlan(response);
                },
                error: function (msg) { alert('Connect to database is break. Please check connection info!'); }
            });

        }
        function AddMyGrocery(MealPlanId, UserId, OldUser) {
            //_oldUser
            $("#gallery li#" + MealPlanId).remove();
            //document.getElementById("<%=GroceryRecipe.ClientID %>").value += "," + RecipeId;
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetRecipeUserByMealPlan",
                data: "{'MealPlanId':'" + MealPlanId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //alert(response.d);
                    //BindRecipe(response);
                    for (var i = 0; i < response.d.length; i++) {
                        var varObjectID = response.d[i].RecipeID;
                        document.getElementById("<%=GroceryRecipe.ClientID %>").value += "," + varObjectID;
                    }

                },
                error: function (msg) { alert(msg.constructor) }
            });

        }

       function SearchMealPlan() {
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetMealPlanByName",
                data: "{'MealPlanName':'" + $("#inPutSearch").val() + "','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlan(response);
                    //bindDragandDrop();
                }
            });
        }

        function ViewMealPlanFullView(mealPlanToView) {
            self.location = "MealPlan.aspx?MealPlanId=" + mealPlanToView + "";
        }

        function BindMeaPlan(response) {
            var mealPlan = response.d;
            var html = '';
            var userid = '<%=Session["Userid"]%>';
            if (mealPlan.length > 0) {
                for (var i = 0; i < mealPlan.length; i++) {
                    var varObjectID = mealPlan[i].MealPlanID;
                    var OldUser = mealPlan[i].UserID
                    var varObjectName;
                    var varObjectNameFull;
                    if (mealPlan[i].MealPlanName != null) {
                        //                    varObjectName = mealPlan[i].MealPlanName.substring(0, 10) + ' ..';
                        varObjectName = mealPlan[i].MealPlanName.substring(0, 10);

                        varObjectNameFull = mealPlan[i].MealPlanName;
                        if (varObjectNameFull.length > 10) varObjectName = varObjectName + ' ..';
                    }
                    else {
                        varObjectName = 'No Name..';
                        varObjectNameFull = 'No Name';
                    }
                    var varObjectImage = mealPlan[i].MealPlanPhoto;
                    var rating = mealPlan[i].MealPlanRating;
                    rating = "'" + rating + "'";

                    html += '<li id="' + varObjectID + '" class="ui-widget-content ui-corner-tr form-row-image" >'
                    html += '<a id="' + varObjectID + '" class="none-decoration" href="MealPlan.aspx?MealPlanId=' + varObjectID + '" onclick="ViewMealPlanFullView(' + varObjectID + ')">' + varObjectName + '</a>';
                    html += '<img class="tooltip" id="' + varObjectID + '" height="72" width="88" alt="' + varObjectNameFull + '" serving="' + 1000 + '" src="data:image/jpeg;charset=utf-8;base64,' + varObjectImage + '" style="display: inline-block; height: 72px;" title="<b>Description: </b>' + varObjectNameFull + '</br><b>Author: </b></br><div class=basic data-average=' + rating + ' data-id=1></div>" onclick="ViewMealPlanFullView(' + varObjectID + ')">';
//                    html += '<p>';
                    if (userid != '') {

                        //                        html += '<a title="Create meal plan" class="ui-icon ui-icon-plus" style="float:right"></a>';
                        html += '<a onclick="javascript:AddMyGrocery(' + varObjectID + ',' + userid + ',' + OldUser + ')" title="Add to my meal plan" class="ui-icon ui-icon-star" style="float:right"></a>';
                    }
//                    html += '</p>';
                    html += '</li>'
                }
                $('#gallery').html(html);
                //init_tooltip();
            }
        }

        

        function loadRecipes() {
            var MealPlanId = getUrlVars()["MealPlanId"];
            //alert(MealPlanId);
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetRecipeUserByMealPlan",
                data: "{'MealPlanId':'" + MealPlanId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    //alert(response.d);
                    //BindRecipe(response);
                },
                error: function (msg) { alert(msg.constructor) }
            });

        }

        function SearchMealPlan() {
            $.ajax({
                type: "POST",
                url: "PIMServices.asmx/GetMealPlanByName",
                data: "{'MealPlanName':'" + $("#inPutSearch").val() + "','UserId':'0'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    BindMeaPlan(response);
                    //bindDragandDrop();
                }
            });
        }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="search-head" style="">
    <div class="search_bg" >
            <div class="txt_box">
                <input name="searchrecipes" id="inPutSearch" class="textInputs" type="text" onfocus="javascript: if(this.value == 'Search MealPlan'){ this.value = ''; }" onblur="javascript: if(this.value==''){this.value='Search MealPlan';}" value="Search MealPlan" size="22"></div>
            <div class="btn_search" onclick="SearchMealPlan();" style="height:18px">
                <img src="images/btn_search.jpg" alt="" width="23" height="18"/></div>
    </div>
    <div class="row-image">
        <%--<img src="images/img04.jpg"/>--%>
    </div>
    <div class="row-image">
        <asp:ImageButton ID="BtnGroceryList" runat="server" 
            ImageUrl="~/images/img01.jpg" CssClass="img-icon" onclick="BtnGroceryList_Click"/>
    </div>
    <%--<div  class="row-image">
        <img src="images/key-icon.png"  />
    </div>--%>
    
    <div style="clear:both"></div>
    </div>
    <div id="primary-main">
    <div id="primary-nav">
        <ul id="gallery">
        </ul>
        <input id="inputRecipeId" type="hidden" />
    </div>
    </div>
<div style="clear:both"></div>
<asp:HiddenField id="GroceryRecipe" runat="server"/>
</asp:Content>

